/*
* @Author: Rosen
* @Date:   2018-01-26 16:48:16
* @Last Modified by:   Rosen
* @Last Modified time: 2018-01-31 14:34:10
*/
import React        from 'react';
import { Link }     from 'react-router-dom';
import MUtil        from 'util/mm.jsx'
import User         from 'service/user-service.jsx'

import PageTitle    from 'component/page-title/index.jsx';
import TableList    from 'util/table-list/index.jsx';
import Pagination   from 'util/pagination/index.jsx';//用户列表分页
import ListSearch   from './index-list-search.jsx';
const _mm   = new MUtil();
const _user = new User();

class UserList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list            : [],
            pageNum         : 1,
              listType        : 'list' //默认全部显示用户，如果点了搜索就是单个搜素类型
        };
    }
    componentDidMount(){
        this.loadUserList();
    }
    loadUserList(){

        let listParam = {};
        listParam.listType = this.state.listType; //获取值
        listParam.pageNum  = this.state.pageNum;
        // 如果是搜索的话，需要传入搜索类型和搜索关键字
        if(this.state.listType === 'search'){
            listParam.searchType = this.state.searchType;
            listParam.keyword    = this.state.searchKeyword;
        }
        // 请求接口
        _user.getUserList(listParam).then(res => {
            this.setState(res);
        }, errMsg => {
            this.setState({
                list : []
            });
            _mm.errorTips(errMsg);
        });

    }
    // 页数发生变化的时候
    onPageNumChange(pageNum){
        this.setState({
            pageNum : pageNum
        }, () => {
            this.loadUserList();
        });
    }
     // 搜索
    onSearch(searchType, searchKeyword){
      console.log(searchType);  
      console.log(searchKeyword);
        let listType = searchKeyword === '' ? 'list' : 'search'; //如果没有输入值，默认为list类型，就显示全部用户
        this.setState({ //设置值
            listType        : listType,
            pageNum         : 1,
            searchType      : searchType,
            searchKeyword   : searchKeyword
        }, () => {
            this.loadUserList();
        });
    }



    // 设置更新限制原因
    onUpdateLimit(username , limitText){
        let newName = window.prompt('设置限制登陆原因：例：您与什么时候，做了什么事情,将在什么时候才可以登录', limitText);
        if(newName){
            _user.onUpdateLimit({
                username:username,
                newName: newName
            }).then(res => {
                _mm.successTips(res);
                this.loadCategoryList();
            }, errMsg => {
                _mm.errorTips(errMsg);
            });
        }
    }

  onLimit(username, type){
            _user.onLimit({
                username:username,
                type: type
            }).then(res => {
                _mm.successTips(res);
                this.loadCategoryList();
            }, errMsg => {
                _mm.errorTips(errMsg);
            });
        
    }

  // 设置结束时间
    onUpdateEndTime(username , endTime){
        let newName = window.prompt('设置限制登陆结束时间：格式：2010-01-09', endTime);
        if(newName){
            _user.onUpdateEndTime({
                username:username,
                newName: newName
            }).then(res => {
                _mm.successTips(res);
                this.loadCategoryList();
            }, errMsg => {
                _mm.errorTips(errMsg);
            });
        }
    }

    render(){

        let listBody = this.state.list.map((user, index) => {
            return (
                
                <tr key={index}>
                    <td>{user.id}</td>
                    <td>{user.username}</td>
                    <td>{user.phone}
                    </td>
                      <td>{user.question}</td>
                    <td>{new Date(user.createTime).toLocaleString()}</td>
          <td> <a className="opear"
                            onClick={(e) => this.onLimit(user.username,1)}>点击设置</a>
        </td>

      <td>
        <a className="opear"
          onClick={(e) => this.onLimit(user.username,0)}>点击取消</a>

      </td>
         <td>
              <a className="opear" onClick={(e) => this.onUpdateLimit(user.username,user.limitText)}>{user.limitText!=null?user.limitText:"未设置原因"}</a>
         </td>

            <td>   <a className="opear" onClick={(e) => this.onUpdateEndTime(user.username,user.endTime)}>{user.limitEndTime!=null?new Date(user.limitEndTime).toLocaleString():"正常用户"}</a>
              </td>

                </tr>
            );
        });
        return (
            <div id="page-wrapper">
                <PageTitle title="用户管理"/>
                          {/*      搜索  ch 的值是ListSearch类传过来的，然后this.onSearch调用方法*/}
                <ListSearch ch={(searchType, searchKeyword) => 
                    {this.onSearch(searchType, searchKeyword)}}/>
{/*表头信息TableList类 传进去tableheads*/}
                <TableList tableHeads={['ID', '登陆账号', '电话','密码问题', '注册时间','限制登陆','取消限制','点击设置限制原因','点击设置限制结束时间']}>
                 {listBody}
                </TableList>
                <Pagination current={this.state.pageNum} //当前页数
                    total={this.state.total}  //共多少页
                    //跳转
                    onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
            </div>
        );
    }
}

export default UserList;